<style>
  .send-message-drawer-footer{
    width: 100%;
    position: relative;
    bottom: -50px;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .show-info{
    font-size: 16px;
    margin-left: 60px;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: left
  }
  .show-info span:first-child {
    display: inline-block;
    width: 120px;
    margin-right: 15px;
  }
  .ivu-radio-wrapper {
    white-space: normal
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      @on-close="cancel"
      :closable="false"
      :title="title"
      width="40%">
      <div style="margin-left: 60px;">
        <div style="width: 550px; height: 50px; border: 1px solid #000; line-height: 50px; text-align: center; font-size: 14px;">系统消息内容</div>
        <Form
        ref="sendMessageDrawer"
        style="width: 100%"
        >
        <RadioGroup style="width: 550px;" v-model="checkAllGroup" :key="index" v-for="(item, index) in messageTemplateList" @on-change="handleChange(index, item)">
          <Radio :label="item.id" style="width: 550px; height: 180px; border:1px solid #000; padding-top: 25px; padding-left: 10px; margin-top: 3px; font-size: 14px;">
            <span style="margin-left: 6px;">创建日期：{{item.ctime}}</span>
            <div style="text-align: center">
              {{item.title}}
            </div>
            <div style="margin-left: 20%; margin-top: 5px;">本次内容：</div>
            <div style="margin-left: 25%; width: 250px;">{{item.content}}</div>
          </Radio>
        </RadioGroup>
        </Form>
      </div>
      <div class="send-message-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" :disabled="messageTemplateList && checkAllGroup  ? false : true" @click="handleSubmit">确认发送</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'SendMessageDrawer',
  data () {
    return {
      title: '',
      loading: true,
      item: {},
      checkAllGroup: ''
    }
  },
  updated () {
    this.title = '消息模板'
  },
  computed: {
    ...mapState({
      modalState: state => state.modal.customerDrawerState,
      messageTemplateList: state => state.messageTemplate.messageTemplateList
    })
  },
  methods: {
    ...mapActions(['updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('message-send-valid', {
        title: this.item.title,
        id: this.item.id,
        content: this.item.content,
        checkAllGroup: this.checkAllGroup
      })
      this.checkAllGroup = ''
    },
    cancel () {
      this.updateCustomerDrawerState(false)
      this.checkAllGroup = ''
      this.$refs['sendMessageDrawer'].resetFields()
    },
    handleChange (index, item) {
      this.item = item
    }
  }
}
</script>
